<template>
    <div class="contain">
        <div class="title">跟换手机号</div>
        <a-alert message="为了保障您的合法权益，更换手机号需实名认证；如您还未实名认证，请先完成实名认证。" type="info" show-icon/>
        <div class="content">
            <div class="navi-div">
                <span :class="{active:sheet_index >=0}">1</span>
                <img src="../../../assets/image/icon/u2721.png" style="height: 5px;">
                <span :class="{active:sheet_index >= 1}">2</span>
                <img src="../../../assets/image/icon/u2721.png" style="height: 5px;">
                <span :class="{active:sheet_index === 2}">3</span>
            </div>
            <!--sheet 1-->
            <a-form-model v-show="sheet_index == 0" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
                          style="padding-top: 50px">
                <a-form-model-item label="旧手机号">
                    <a-input v-model="form.oldPhone" disabled="disabled"></a-input>
                </a-form-model-item>
                <a-form-model-item label="新手机号">
                    <a-input v-model="form.newPhone"></a-input>
                </a-form-model-item>
                <a-form-model-item label="验证码">
                    <a-input v-model="form.yzm" style="width: 45%;margin-right: 10%"></a-input>
                    <a-button type="primary" @click="getYzm" style="width: 45%">{{ getYzmMsg }}</a-button>
                </a-form-model-item>
                <a-form-model-item style="text-align: center;margin-left: 38.5%">
                    <a-button type="primary" @click="nextBtnClick">
                        下一步
                    </a-button>
                </a-form-model-item>
            </a-form-model>
            <!--sheet 2-->
            <a-form-model v-show="sheet_index == 1" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
                          style="padding-top: 50px">
                <a-form-model-item label="真实姓名">
                    <a-input v-model="form.name" disabled="disabled"></a-input>
                </a-form-model-item>
                <a-form-model-item label="身份证号后六位">
                    <a-input v-model="form.last6num"></a-input>
                </a-form-model-item>
                <a-form-model-item style="text-align: center;margin-left: 38.5%">
                    <a-button type="primary" @click="nextBtnClick">
                        下一步
                    </a-button>
                </a-form-model-item>
            </a-form-model>
            <!--sheet 3-->
            <div v-show="sheet_index == 2" style="padding-top: 45px;">
                <div class="finish_div">
                    <img src="../../../assets/image/icon/register_finish.png"/>
                </div>
                <div class="finish_div">
                    <p> 绑定手机号：{{ form.newPhone }}</p>
                </div>
                <div class="finish_div">
                    <p>更换手机号成功，您可以用型手机号登录财鑫网校</p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    name: 'changePhoneNumber',
    data() {
        return {
            labelCol: {span: 10},
            wrapperCol: {span: 5},
            getYzmMsg: '获取验证码',
            sheet_index: 0,
            form: {
                oldPhone: this.$api.getAccount().phone,
                newPhone: '',
                last6num: '',
                yzm: '',
                name:this.$api.getAccount().name
            }
        }
    },
    methods: {
        nextBtnClick() {
            console.log(this.sheet_index)
            switch (this.sheet_index) {
                case 0: {
                    //验证手机新手机号码
                    if (this.form.newPhone === '') {
                        this.$util.alert('新号码不能为空', 2)
                    }
                    if (this.form.yzm === '') {
                        this.$util.alert('验证码不能为空', 2)
                    }
                    this.sheet_index++;
                    break
                }
                case 1: {
                    this.$api.ajaxData({
                        pathName: 'doUpPhone',
                        authorization: true,
                        params: {
                            yzm: this.form.yzm,
                            phone2: this.form.newPhone,
                            card:this.form.last6num
                        }
                        // eslint-disable-next-line no-unused-vars
                    }).then(res => {
                        this.sheet_index ++;
                    })
                    break
                }
            }
        },
        getYzm() {
            console.log('获取验证码')
            if (this.form.newPhone === '') {
                this.$util.alert('新号码不能为空', 2)
            }
            this.$api.ajaxData({
                pathName: 'doGetYzm3',
                authorization: true
            }).then(res => {
                console.log(res)
                this.getYzmMsg = '已发送'
            })
        }
    }
}
</script>

<style scoped lang="scss">
.contain {
    padding: 0 20px;
    border: 1px solid #f7f7f7;
    background: #fff;

    .title {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #f7f7f7;
    }

    .content {
        padding: 40px 0 20px 20px;

        .navi-div {
            //background-color: black;
            height: 50px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;

            span {
                display: flex;
                width: 37px;
                height: 37px;
                line-height: 37px;
                border-radius: 50%;
                font-size: 20px;
                font-weight: bold;
                color: #fff;
                background: #ccc;
                align-items: center;
                justify-content: center;

                &.active {
                    background: #69f;
                }
            }
        }

        .finish_div {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 5px;

            .finish_icon {
                background-image: url(../../../assets/image/icon/register_finish.png);
            }
        }

        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }
}
</style>
